{% extends "base.html" %}
{% block page_title %}Projects{% endblock %}
{% load project_extras %}

{% block content %}
<div class="card full">
  <div class="cardface">
    <h1>Projects</h1>
    <div class="list-group">
      <table class="table table-striped">
        <tbody>
          {% for project in object_list %}
          <tr>
            <td>{{ project.name }}</td>
            <td><a href="{{ project.get_absolute_url }}">Details</a></td>
            <td><a href="{% url 'projects:project_code' project.pk %}">Annotate</a></td>
            {% if project|proj_permission_level:request.user.profile > 1 %}
            <td><a href="{% url 'projects:project_admin' project.pk %}">Admin Dashboard</a></td>
              {% if project.has_model %}
                <td><a class="download_btn" name="{{ project.pk }}" onclick="download_model({{project.pk}})">Download Model and Labeled Data</a></td>
              {% else %}
                {% if project.labeled_data_count > 0 %}
                <td><a class="download_btn" name="{{ project.pk }}" onclick="download_data({{project.pk}})">Download Labeled Data</a></td>
                {% else %}
                <td><p>No Labeled Data to Download</p></td>
                {% endif %}
              {% endif %}
            {% endif %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <a class="btn btn-primary margin-top" href="{% url 'projects:project_create' %}">New Project</a>

    {% if is_paginated %}
      <div class="pagination">
        <span class="page-links">
          {% if page_obj.has_previous %}
            <a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">previous</a>
          {% endif %}
          <span class="page-current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
          </span>
          {% if page_obj.has_next %}
            <a href="{{ request.path }}?page={{ page_obj.next_page_number }}">next</a>
          {% endif %}
        </span>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block scripts_body %}
<script>
/*
 *  When download button is pressed request the csv file, add the data as a blob
 *  to a new anchor element, and trigger a click event on that anchor element
 *  to prompt the download file popup
 *  NOTE: this function is also in detail.html, but edited to work for multiple
 *  buttons on the same page
 */
function download_data(pk) {
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    var a, today;
    if (xhttp.readyState === 4 && xhttp.status === 200) {
      a = document.createElement('a');
      a.href = window.URL.createObjectURL(xhttp.response);
      today = new Date();
      a.download = 'project_' + String(pk) + '_labels_' + today.toDateString().split(' ').join('_') + '.csv';
      a.style.display = 'none';
      document.body.appendChild(a);
      return a.click();
    }
  };
  xhttp.open('GET', '/api/download_data/' + String(pk) + '/', true);
  xhttp.setRequestHeader('Content-Type', 'application/json');
  xhttp.responseType = 'blob';
  xhttp.send();
}

/*
 *  When the download model button is pressed, download a zip file
 *  with a README, the model, labeled data, and tfidf matrix
 */
function download_model(pk) {
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    var a, today;
    if (xhttp.readyState === 4 && xhttp.status === 200) {
      a = document.createElement('a');
      a.href = window.URL.createObjectURL(xhttp.response);
      today = new Date();
      a.download = 'project_' + String(pk) + '_model_' + today.toDateString().split(' ').join('_') + '.zip';
      a.style.display = 'none';
      document.body.appendChild(a);
      return a.click();
    }
  };
  xhttp.open('GET', '/api/download_model/' + String(pk) + '/', true);
  xhttp.setRequestHeader('Content-Type', 'application/json');
  xhttp.responseType = 'blob';
  xhttp.send();
}

</script>
{% endblock %}
